import React, { Fragment } from 'react';
import { BenchMarkC, AdvancedSearch, PrimaryC, FirstHeaderC, SecondHeaderC, DATA_ENTRY } from '../../../components';

import { Form } from 'antd';

class BenchMarkDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      init2: '600914ae5f5a0f7787cc71f5',
      init3: undefined,
      init4: ['600914ae5f5a0f7787cc71f5', '64ad06aed54dab28601db4b8'],
    };

    setTimeout(() => {
      this.setState({
        init3: '64ad06aed54dab28601db4b8',
      });
    }, 3000);
  }

  onClick2 = () => {
    this.state.BenchMarkC2.setSelect('6423d3b26e298608b09698c2');
  };

  onClick3 = () => {
    this.state.BenchMarkC3.setSelect('600914ae5f5a0f7787cc71f5');
  };

  onClick4 = () => {
    this.state.BenchMarkC4.setSelect(['64a68cd6b61ef40b5faa3bed', '6423d3b26e298608b09698c2']);
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <Form ref={this.formRef}>
          <FirstHeaderC title='基本用法' />
          <div style={{ width: '500px' }}>
            <SecondHeaderC title='无初始化值' />
            <BenchMarkC form={this.formRef.current} dataIndex='bench1' onChange={(e) => console.log(e)} />
            <SecondHeaderC title='有初始化值-同步' />
            <BenchMarkC
              form={this.formRef.current}
              dataIndex='bench2'
              initialValue={this.state.init2}
              onRef={(ref) => this.setState({ BenchMarkC2: ref })}
              onChange={(e) => console.log(e)}
            />
            <PrimaryC onClick={this.onClick2} title='修改' />
            <SecondHeaderC title='有初始化值-异步' />
            <BenchMarkC
              form={this.formRef.current}
              dataIndex='bench3'
              initialValue={this.state.init3}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ BenchMarkC3: ref })}
            />
            <PrimaryC onClick={this.onClick3} title='修改' />
            <SecondHeaderC title='多选模式初始化' />
            <BenchMarkC
              form={this.formRef.current}
              dataIndex='bench4'
              multiple={true}
              initialValue={this.state.init4}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ BenchMarkC4: ref })}
            />
            <PrimaryC onClick={this.onClick4} title='修改' />
            <SecondHeaderC title='设置校验规则' />
            <BenchMarkC form={this.formRef.current} dataIndex='bench5' rules={[{ required: true, message: '请选择基准!' }]} onChange={(e) => console.log(e)} />
            <SecondHeaderC title='设置帮助信息' />
            <BenchMarkC form={this.formRef.current} dataIndex='bench6' helper='lalal' onChange={(e) => console.log(e)} />
            <SecondHeaderC title='禁用' />
            <BenchMarkC form={this.formRef.current} dataIndex='bench7' disabled={true} onChange={(e) => console.log(e)} />
          </div>
          <FirstHeaderC title='在查询条件中引用' />
        </Form>
        <AdvancedSearch
          dataSource={[
            {
              dataIndex: 'bench8',
              type: DATA_ENTRY.BENCHMARK,
              initialValue: this.state.init3,
            },
          ]}
          onQuery={(e) => console.log(e)}
        />
      </div>
    );
  }
}

export default BenchMarkDemo;
